<template>
	<view class="delivery-order">
		<nav-bar title="已送达订单"></nav-bar>
		<!-- <you-form ref="form" :showFormTitle="false" :formConfig="orderArriveConfig"
			v-model="orderArriveForm"></you-form> -->
		<uni-forms ref="form" :rules="rules">
			<uni-forms-item label="店铺图片" class="form-items picture" name="">
				<view style="
				padding: 10upx 0;">
					<uni-file-picker v-model="storeImgs" :limit="6" :imageStyles="imageStyles"
						@select="uploadSelectStoreId($event)" @delete="deletes">
						<uni-icons type="camera-filled" size="30" color="#999999"></uni-icons>
						<view class="desc">点击上传</view>
					</uni-file-picker>
				</view>
			</uni-forms-item>
			<uni-forms-item label="备注" class="form-items" name="">
				<textarea name="" id="" placeholder="请输入备注信息" v-model="remark"
					style="width: 53vh;padding: 20rpx; background: #f2f2f2;border-radius: 16rpx;box-sizing: border-box;"
					cols="30" rows="10"></textarea>
				<!-- <input type="text" style="text-align: right;"/> -->
			</uni-forms-item>
		</uni-forms>
		<you-bottom-btn :btnConfig="bottomBtnConfig" @clickSubmit="clickSubmit"></you-bottom-btn>
	</view>
</template>

<script>
	import {
		baseUrl,
		baseImgUrl,
		baseIconUrl
	} from '@/config'
	import {
		BASIC_FORM
	} from '../formConfig/orderArrive'
	import {
		getMiniprogramToken
	} from "@/utils/auth"
	export default {
		name: "deliveryOrder",
		components: {},
		data() {
			return {
				baseUrl,
				id: '',
				user: '',
				storeImgs: [],
				storeImg: [],
				remark: '',
				imageStyles: {
					width: 100,
					height: 100,
					border: {
						color: "#D8DCE5",
						width: '2rpx',
						style: 'dashed',
						radius: '16rpx'
					}
				},
				orderArriveConfig: [],
				orderArriveForm: {},
				bottomBtnConfig: [{
					text: '提交',
					class: 'confirm',
					funcName: 'clickSubmit'
				}],
			};
		},

		async onLoad(options) {
			this.id = options.id
			this.orderArriveConfig = uni.$u.deepClone(BASIC_FORM)
			const res = await this.$GET('/fx/user/getInfo')
			this.user = res.data.roleType
		},
		onShow(options) {},
		onReady() {
			// 微信小程序需要用此写法
		},
		methods: {
			async uploadSelectStoreId(e) {
				const tempFilePaths = e.tempFilePaths
				if (!tempFilePaths.length) return; //如果没有选择图片就退出
				//循环选择图片的张数
				tempFilePaths.map(async () => {
					const path = tempFilePaths.pop();
					//因为我这个后台给的接口一次只能上传一张图片，所以每循环一次就调用接口上传一次
					const [err, {
						data
					}] = await uni.uploadFile({
						url: this.baseUrl + '/common/upload', //后台地址
						filePath: path,
						name: 'file',
						header: {
							"Authorization": 'Bearer ' + getMiniprogramToken()
						},
					});
					//因为async返回的是个promise对象，所以要把返回的数据转为对象格式。
					let dataObj = JSON.parse(data)
					//每循环一次就把后台返回的图片地址添加到filePathsList数组
					this.storeImg.push(dataObj.fileName)
					console.log(this.storeImg);
				})
			},
			deletes(e, i) {
				this.storeImg.splice(i, 1);
				console.log(this.storeImg);
			},
			async clickSubmit(item) {
				let data = {
					id: this.id,
					orderStatus: 4,
					receiveImgUrl: this.storeImg.toString(),
					receiveRemark: this.remark
				}
				const res = await this.$PUT('/fx/order', data)
				console.log(res)
				if (res.code == 200) {
					uni.showToast({
						icon: 'success',
						title: res.msg,
						duration: 2000
					})
					setTimeout(() => {
						if (this.user === 4) {
							uni.redirectTo({
								url: '/subPages/otherPages/businessOrder'
							})
						} else if (this.user === 3) {
							uni.redirectTo({
								url: '/subPages/otherPages/supplierOrder'
							})
						}
					}, 2000)
				}
			},
		},
	};
</script>

<style lang="scss">
	.delivery-order {
		background: #ffffff;
		height: 100vh;

		.form-items {
			padding: 20rpx 30upx;
		}

		.uni-forms-item {
			padding: 0 20rpx;

			&:nth-of-type(1) {
				flex-direction: column;

				.label {
					margin-bottom: 16upx;
				}
			}

			&:nth-of-type(2) {
				display: flex;
				flex-direction: column;
				align-items: flex-start;

				.label {
					margin-bottom: 16upx;
				}
			}
		}
	}
</style>